<template>
	<div class="student">
		<h2>我是Student组件</h2>
		<ul>
			<li>学生姓名：{{name}}</li>
			<li>学生年龄：{{age}}</li>
		</ul>
		<h3>我收到的数据</h3>
		<button @click="qian2++">孩子赚钱了（一块一块赚）</button><br><br>
		<button @click="che.name = '奔驰' ">孩子出去吹牛了，说车名是奔驰</button><br><br>
		<button @click="che = {name:'保时捷',price:2000000}">
			孩子真正的有钱了，彻底换掉了这台车（会报错）
		</button><br><br>
		<button @click="che.age += 1">车龄+1年</button>
		<ul>
			<li>消息：{{xiaoxi}}</li>
			<li>钱：{{qian2}}</li>
			<li>车名：{{che.name}}</li>
			<li>车价：{{che.price}}</li>
			<li>车龄：{{che.age}}</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'Student',

		//第一种声明接收props的方式（只接收）
		props:['xiaoxi','qian','che'], //声明接收数据，接收到的数据全部自动放在了vc上

		//第二种声明接收props的方式
		/* props:{
			xiaoxi:String, //声明接收xiaoxi并且对xiaoxi的类型进行限制，只能传递字符串
			qian:Number,
			che:Object,
		}, */

		//第三种声明接收props的方式
		/* props:{
			xiaoxi:{
				type:String,
				default:'哈哈哈嘻嘻嘻',
				required:true
			},
			qian:{
				type:Number,
				default:100,
				required:true
			},
			che:{
				type:Object,
				default(){ //严重注意：当配置的默认值是{}或[]的时候，必须把default写成函数（类似于data要写成函数）
					return {name:'雅迪',price:3200,age:1}
				},
				required:true
			}
		}, */
		
		data() {
			console.log(this)
			return {
				name:'佩奇',
				age:18,
				qian2:this.qian,
			}
		}
	}
</script>

<style scoped>
	.student{
		background-color: pink;
		padding: 20px;
	}
</style>